<template>
  <div class="childComment">
    <Child v-if="data.parent" :data="data.parent" />
    <div class="info">
      <div class="username">{{ data.account.nickname }}</div>
      <div class="date">{{ data.account.updated_at | ismoment }}</div>
    </div>
    <div class="content">
      <div class="text">{{ data.content }}</div>
      <img
        :src="$axios.defaults.baseURL + pic.url"
        alt=""
        class="contentImg"
        v-for="(pic, index) in data.pics"
        :key="index"
      />
      <div class="react" @click="handleReply({'id':data.id,'name':data.account.nickname})">回复</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {EventBus} from "@/plugins/bus"
export default {
  name: "Child",
  props: ["data"],
  filters: {
    ismoment(val) {
      return moment(val).format("YYYY-MM-DD hh:mm");
    },
  },
  methods:{
    handleReply(params){
      EventBus.$emit('handleEvent',params)

    }
  }
};
</script>

<style lang="less" scoped>
.childComment {
  border: 1px solid #ddd;
  background: #f9f9f9;
  padding: 2px;
  .info {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    .username {
      font-size: 14px;
      color: #666;
      padding-left: 8px;
    }
    .date {
      font-size: 12px;
      color: #9999a5;
      padding-left: 8px;
    }
  }

  .content {
    padding: 5px 10px;
    position: relative;
    &:hover{
      .react{
        opacity: 1;
      }
    }
    .text {
      padding-top: 8px;
    }
    .contentImg {
      width: 80px;
      height: 80px;
      object-fit: cover;
      padding: 8px;
      margin-top: 8px;
      border: 1px dashed #ddd;
    }
    .react {
      position: absolute;
      right: 20px;
      bottom: 8px;
      color: #1e50a2;
      font-size: 14px;
      cursor: pointer;
      opacity: 0;
    }
  }
}
</style>